<template>
  <!-- 文档位置https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices -->
  <!-- <img alt="logo" class="logo" src="./assets/electron.svg" />
  <div class="actions">
    <div class="action">
      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
    </div>
    <div class="action">
      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
    </div>
  </div>
  <Versions /> -->

  <Suspense>
    <main class="container group" @contextmenu="rightBtnClick">
      <section>
        <camera-one
          v-if="config.page === 'setting'"
          theme="outline"
          size="24"
          class="absolute left-1/2 -translate-x-1/2 mt-3 text-white opacity-80 cursor-pointer z-10 hidden group-hover:block"
          @click="onPageChange('camera')"
        />
        <ConfigIcon
          v-if="config.page === 'camera'"
          theme="outline"
          size="24"
          class="absolute left-1/2 -translate-x-1/2 mt-3 text-white opacity-80 cursor-pointer z-10 hidden group-hover:block"
          @click="onPageChange('setting')"
        />
        <hand-drag
          v-if="config.page === 'camera'"
          theme="outline"
          size="24"
          class="drag-box absolute bottom-3 left-1/2 -translate-x-1/2 mb-3 text-white opacity-80 cursor-move z-10 hidden group-hover:block"
        />
      </section>

      <Camera v-if="config.page === 'camera'" />
      <Setting v-if="config.page === 'setting'" />
    </main>
  </Suspense>
</template>

<script setup lang="ts">
// import Versions from './components/Versions.vue'
import Camera from './components/Camera.vue'
import Setting from './components/Setting.vue'
import { CameraOne, Config as ConfigIcon, HandDrag } from '@icon-park/vue-next'
// import useConfig from '@renderer/composables/useConfig'
// const { config, updateConfig } = useConfig()
import { useConfigStore } from '@renderer/stores/useConfigStore'
const { config } = useConfigStore()

// import useDrag from './composables/useDrag'

// const ipcHandle = () => window.electron.ipcRenderer.send('ping')

const onPageChange = (pageType: string) => {
  config.page = pageType
}

// 右键点击事件
const rightBtnClick = () => {
  // @ts-ignore (define in dts)
  window.api.rightBtnClick()
}

// 拖拽窗口
// const { drag } = useDrag()
// drag.run()
</script>
